<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1.0">
    <title>咸鱼</title>
    <script src="${ctx}/js/jquery1.8.2.min.js"></script>
    <script src="${ctx}/js/vue.min.js"></script>
    <link rel="stylesheet" href="${ctx}/css/reset.css">
    <script src="${ctx}/js/changeSize.js"></script>
    <script src="${ctx}/layui/layui.all.js"></script>
    <link rel="stylesheet" href="${ctx}/layui/css/layui.mobile.css">
</head>
<style>
    [v-cloak] {
        display: none;
    }
   .link_box {
       position: fixed;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
       background: url('${ctx}/image/link_bg.png')no-repeat top center;
       background-size: cover;
   }

   .btn_box {
       position: absolute;
       width: 88%;
       top: 60%;
       left: 50%;
       margin-left: -44%;
   }

    .link_box a {
        display: block;
        width: 100%;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        border-radius: 1rem;
        background: #FF5E36;
        color:#fff ;
        font-size: 0.81rem;
    }

    .link_box .btn_box a:first-child {
        margin-bottom: 1rem;
        background: #fff;
        color: #FF5E36;
    }

    .mask {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background: rgba(0,0,0,0.5);
    }

    .tips {
        position: fixed;
        width: 80%;
        top: 40%;
        left: 50%;
        margin-left: -40%;
        background: #fff;
        color: #333;
        border-radius: 2px;
        box-shadow: 1px 1px 50px rgba(0,0,0,.3);
        z-index: 105;
    }

    .tip_head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 2rem;
        padding:0 0.5rem;
        border-bottom: 1px solid #f2f2f2;
        font-size: 0.85rem;
    }

    .tip_head i{
        display: block;
        width: 0.8rem;
        height: 0.8rem;
        background: url('${ctx}/image/close.png')no-repeat top center;
        background-size: 100% 100%;
    }

    .tip_body {
        padding: 1rem 0.8rem;
        font-size: 0.85rem;
        min-height: 2rem;
    }

    .tip_foot {
        display: flex;
        justify-content: flex-end;
        padding: 0.5rem;
    }

    .tip_foot span{
        display: block;
        width: 4.5rem;
        height:1.6rem;
        line-height: 1.6rem;
        text-align: center;
        border-radius: 4px;
        border:1px solid #f2f2f2;
        font-size: 0.8rem;
    }

    .tip_foot span:last-child{
        border:1px solid #FF5E36;
        background:#FF5E36;
        color: #fff;
        margin-left: 0.8rem;
    }

</style>
<body>
<div id="app" v-cloak>
    <div class="link_box"  >
        <div class="btn_box">
            <a @click="openPopup(0,'是否立即打开咸鱼兼职APP？')">打开兼职咸鱼APP</a>
            <a @click="openPopup(1,'当前手机是否安装应用？')">下载兼职咸鱼APP</a>
        </div>
    </div>
    <div v-if="isTip">
        <div class="mask"></div>
        <div class="tips">
            <div class="tip_head">
                <span>提示</span>
                <i @click="closePopup()"></i>
            </div>
            <div class="tip_body">
                <p>{{tipDetail}}</p>
            </div>
            <div class="tip_foot">
                <span @click="closePopup()">取消</span>
                <span  @click="confirm()">确认</span>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            tipDetail:'',
            isTip:true,
            typeIndex:''
        },
        mounted: function () {
            this.openPopup(0,'是否立即打开咸鱼兼职APP？')
        },
        methods: {
            // 打开APP(目前没法判断手机是否安装APP，通过浏览器打开APP时间判断跳转APP或应用宝)
            openApp: function (t) {
                try {
                    var e = navigator.userAgent.toLowerCase(),n = e.match(/cpu iphone os (.*?) like mac os/);
                    if (((n = null !== n ? n[1].replace(/_/g, ".") : 0), parseInt(n) >= 9)) {
                        window.location.href = t;
                    } else {
                        var r = document.createElement("iframe");
                        r.setAttribute('src', url);
                        r.setAttribute('style', 'display:none');
                        document.body.appendChild(r);
                    }
                } catch (e) {
                    window.location.href = t;
                }
            },

            // 沒有APP情況
            noAPP(){
                var timer = null;
                var t = Date.now(),r = "https://sj.qq.com/myapp/detail.htm?apkName=cc.gara.fish.jj_fish";
                timer = setTimeout(function() {
                    return Date.now() - t > 2200
                            ? (clearTimeout(timer), !1)
                            : !document.webkitHidden && !document.hidden && void (location.href = r);
                },2000);
            },

            // 下载APP
            downloadApp:function () {
                window.location.href = 'https://sj.qq.com/myapp/detail.htm?apkName=cc.gara.fish.jj_fish'
            },

            // 确定打开
            confirm:function () {
                if (this.typeIndex===0) {
                    this.openApp('adidear://home');
                    this.noAPP();
                }else {
                    this.downloadApp();
                }
            },

            // 打开弹窗
            openPopup:function (type,text) {
                this.tipDetail =  text;
                this.isTip = true;
                this.typeIndex = type;
            },

            // 关闭弹窗
            closePopup: function () {
                this.tipDetail =  '';
                this.isTip = false;
            },

        }
    });

</script>
